<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="分享"
      left-arrow
      @click-left="onClickLeft"
      @click-right="showShare = true"
    />
    <div class="header">
      <van-row gutter="20">
        <van-col span="8"
          ><img :src="this.dyDetail.user_face" alt="" width="60px" class="face"
        /></van-col>
        <van-col span="8"
          ><label for="" class="username">{{
            this.dyDetail.user_name
          }}</label></van-col
        >
        <van-col span="8">{{
          $moment(parseInt(this.dyDetail.create_time)).format(
            "YYYY-MM-DD HH:mm"
          )
        }}</van-col>
      </van-row>
    </div>
    <!-- <br /> -->
    <div class="content">
      <label for="">{{ this.dyDetail.content }}</label>
    </div>
    <div class="box" v-show="isYC">
      <div class="yuan">
        <img :src="this.yuanDy.user_face" alt="" width="60px" class="juli" />
        <label for="" class="content,username">{{
          this.yuanDy.user_name
        }}</label
        ><br />
        <label for="" class="content">{{
          $moment(parseInt(this.yuanDy.create_time)).format("YYYY-MM-DD HH:mm")
        }}</label
        ><br />
        <label for="" class="content">{{ this.yuanDy.content }}</label>
      </div>
    </div>
    <div class="footer">
      <!-- 每个元素的两侧间隔相等 -->
      <van-row type="flex" justify="space-around">
        <van-col span="6" @click="forward"
          >转发<van-icon name="share" />{{ this.dyDetail.forwarded }}</van-col
        >
        <van-col span="6"
          >评论<van-icon name="chat" @click="toComment"
        /></van-col>
        <van-col span="6" @click="toGood"
          >点赞<img :src="this.goodSrc" alt="" width="15px"
        /></van-col>
      </van-row>
      <div v-show="isShowComment">
        <div v-show="isShowInput">
          <van-field
            v-model="commentContent"
            rows="2"
            autosize
            label="评论"
            type="textarea"
            maxlength="50"
            placeholder="请输入评论"
            show-word-limit
          />
          <van-button type="primary" size="small" @click="submitComment"
            >发布</van-button
          >
        </div>
      </div>
    </div>
    <div v-for="item in commentList" :key="item.index">
      <div class="commentcard">
        <!-- {{item}} -->
        <div class="time">
          {{
            (Date.now() - item.comment_time) / 60000 > 60
              ? Math.floor((Date.now() - item.comment_time) / 3600000) + "小时"
              : Math.floor((Date.now() - item.comment_time) / 60000) + "分钟"
          }}之前发布了这条信息
        </div>
        <div class="commentWord">{{ item.comment_content }}</div>
        <van-divider />
      </div>
    </div>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-nav-bar
        title="转发动态"
        left-text=""
        right-text="立即转发"
        left-arrow
        @click-left="cancel"
        @click-right="toForward"
      />
      <van-field
        v-model="forwardInfo.message"
        rows="2"
        autosize
        label="转发"
        type="textarea"
        placeholder="说点什么吧"
      />
      <van-cell value="取消" @click="cancel"></van-cell>
    </van-popup>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import qs from "querystring";
export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      dyDetail: {},
      yuanDy: {},
      show: false,
      forwardInfo: {
        message: "",
        username: sessionStorage.getItem("username"),
        time: Date.now(),
        dy_id: this.$route.params.dy_id,
      },
      goodSrc: "http://47.100.42.191/images/goodBefore.png",
      isYC: false,
      isShowComment: false,
      commentList: [],
      commentContent: "",
      isShowInput: true,
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    onClickLeft() {
      this.$router.push({ path: "/Dynamic" });
    },
    loadDetail() {
      axios
        .post(
          "http://localhost:8888/dynamic/detail",
          qs.stringify({ dy_id: this.$route.params.dy_id })
        )
        .then((res) => {
          console.log(res.data[0]);
          this.dyDetail = res.data[0];
          if (this.dyDetail.forward_dy_id) {
            this.isYC = true;
            axios
              .get(
                "http://localhost:8888/dynamic/findOne?dy_id=" +
                  this.dyDetail.forward_dy_id
              )
              .then((res) => {
                console.log("-----------------", res.data[0]);
                this.yuanDy = res.data;
              });
          }
        });
    },
    forward() {
      // this.$router.push({name:'writeDy'})
      this.show = true;
    },
    toGood() {
      // alert("点赞");
      axios
        .get("http://localhost:8888/dynamic/good?dy_id=" + this.dy_id)
        .then((res) => {
          console.log(res);
        });
      this.goodSrc = "http://47.100.42.191/images/goodAfter.png";
    },
    async toForward() {
      let data = qs.stringify(this.forwardInfo);
      // alert(1)
      // console.log(data)
      await axios
        .get("http://localhost:8888/dynamic/forward?" + data)
        .then((res) => {
          console.log(res);
        });
      this.forwardInfo.message = "";
      this.show = false;
      await this.getAll();
    },
    toComment() {
      if (this.isShowComment === false) {
        console.log(this.$route.params.dy_id);
        this.isShowComment = !this.isShowComment;
        axios
          .get(
            `http://localhost:8888/dynamic/findComment?dy_id=${this.$route.params.dy_id}`
          )
          .then((res) => {
            // console.log(res)
            this.commentList = res.data;

            for (var item of res.data) {
              axios
                .get(
                  `http://localhost:8888/user/findById?user_id=${item.user_id}`
                )
                .then((res) => {
                  console.log(res);
                  // this.a = res.data[0];
                  Object.defineProperty(item, "user_name", {
                    value: res.data[0].user_name,
                    enumerable: true,
                    configurable: true,
                  });
                  Object.defineProperty(item, "user_face", {
                    value: res.data[0].user_face,
                    enumerable: true,
                    configurable: true,
                  });
                  // this.itemObj = JSON.parse(item)
                });
            }
          });
      } else {
        this.isShowComment = !this.isShowComment;
      }
    },
    submitComment() {
      if (this.commentContent) {
        axios
          .post(
            "http://localhost:8888/comment/submit",
            qs.stringify({
              content: this.commentContent,
              username: sessionStorage.getItem("username"),
              dy_id: this.$route.params.dy_id,
            })
          )
          .then((res) => {
            console.log(res);
          });
        this.toComment();
        this.isShowInput = false;
        // this.isShowComment = !this.isShowComment;
        this.showComment();
        // this.created();
      } else {
        Toast("请输入内容");
      }
    },
    showComment() {
      axios
        .get(
          `http://localhost:8888/dynamic/findComment?dy_id=${this.$route.params.dy_id}`
        )
        .then((res) => {
          console.log(res);
          this.commentList = res.data;
        });
    },
    cancel() {
      this.show = false;
    },
  },
  created() {
    this.loadDetail();
    this.showComment();
    // this.getYuan();
  },
  close() {
    this.show = false;
  },
};
</script>

<style scoped>
.yuan {
  /* width:calc(100% - 50px); */
  /* width:80% !important; */
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background-color: #fff;
  margin: 20px;
}
.box {
  font-size: 12px;
  width: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header {
  margin-top: 15px;
  box-shadow: 1px 1px 3px #dddada;
}
.box .yuan .content {
  /* display: inline-block; */
  text-align: left;
  margin-left: 15px !important;
  margin-bottom: 10px !important;
  margin-top: 10px !important;
}
.username {
  display: grid;
  justify-self: center;
  align-self: center;
}
</style>
